src/plugins/global-settings/colors/color-picker.js (1)

27-40: Good fix: exporting the picker component restores drag behavior. Also keep rgb in sync.

LGTM on exporting ItemPickerColor to avoid the drag regression. However, updates only set item.color and leave item.rgb stale. If other UI relies on rgb, this will desync on drag.

Apply:

 export const ItemPickerColor = ( { item, onChange } ) => {
   return <div className="stk-color-palette-control__popover-content">
     <ColorPicker
-      onChange={ value => onChange( {
-        ...item,
-        color: value,
-      } ) }
+      onChange={ value => onChange( {
+        ...item,
+        color: value,
+        rgb: getRgb( value ),
+      } ) }
       color={ item.color }
       enableAlpha={ true }
     />
   </div>
 }

src/components/sortable-picker/index.js (1)

23-23: Decouple from plugin-specific registry.

Importing ITEM_PICKER here ties components to plugin code (via util). Prefer a resolver prop with a safe fallback.

Apply:

-import { ITEM_PICKER } from './util'
+import { ITEM_PICKER } from './util' // keep for backward compat, but prefer props.itemPickerResolver

Then in renderContent (see next comment) use props.itemPickerResolver || ITEM_PICKER.
Also add a default prop:

 SortablePicker.defaultProps = {
   className: '',
   label: '',
   onReset: () => {},
+  itemPickerResolver: {},
 }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

src/components/sortable-picker/index.js (3)

48-61: Ref‑forwarding conversion looks good.

Signature switched to forwardRef((props, ref)) with correct prop destructuring. No behavior change otherwise.

Apply a tiny DX tweak so the component shows a readable name in React DevTools:

 } )
 
+SortablePicker.displayName = 'SortablePicker'
+
 SortablePicker.defaultProps = {

---

72-85: Guard against null AddItemPopover to avoid runtime errors when dropdownOnAdd is true.

If AddItemPopover is null and someone toggles the dropdown (e.g., via keyboard), <AddItemPopover .../> will throw.

Suggested change:

-			{ enableAddItem && <Dropdown
+			{ enableAddItem && ( !dropdownOnAdd || AddItemPopover ) && <Dropdown
 				popoverProps={ addItemPopoverProps }
 				renderToggle={ ( { onToggle, isOpen } ) => (
 					<Button
 						className="ugb-global-settings-color-picker__add-button"
 						onClick={ dropdownOnAdd ? onToggle : handleAddItem }
 						icon="plus-alt2"
 						aria-expanded={ isOpen }
 					/>
 				) }
-				renderContent={ ( { onClose } ) => (
-					<AddItemPopover onClose={ onClose } onChange={ handleAddItem } />
-				) }
+				renderContent={ ( { onClose } ) =>
+					AddItemPopover ? (
+						<AddItemPopover onClose={ onClose } onChange={ handleAddItem } />
+					) : null
+				}
 			/> }

---

119-133: Prefer stable keys over array indices.

Using index as key will cause unnecessary remounts during reordering. Use a stable identifier (e.g., item.slug) if available.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro